<template>
  <div>
    <a-modal
      ok-text="确认"
      cancel-text="取消"
      :maskClosable="false"
      :title="'库位 ' + title"
      :width="modalWidth"
      @cancel="handleClose"
      :destroyOnClose="true"
      :visible="visible"
      footer=""
    >
      <div>
        <a-row v-for="(item, index) in list" :key="index">
          <a-col :span="7">
            <div class="textBox">
              <span class="label">商品编码：</span
              ><span>{{ item.goodsCode }}</span>
            </div></a-col
          >
          <a-col :span="7">
            <div class="textBox">
              <span class="label">商品名称：</span
              ><span>{{ item.goodsName }}</span>
            </div></a-col
          >
          <a-col :span="6">
            <div class="textBox">
              <span class="label">商品规格：</span
              ><span>{{ item.specifications }}</span>
            </div>
          </a-col>
          <a-col :span="4">
            <div class="textBox">
              <span class="label">数量：</span><span>{{ item.quantity }}</span>
            </div>
          </a-col>
        </a-row>
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      title: "", // 标题
      visible: false, // 状态、
      modalWidth: 1000, // 弹框宽度
      model: {},
      list: [],
    };
  },
  methods: {
    // 新增
    showModal(record) {
      let { rowLine, col, shelfGoodsNumList } = record;
      console.log(record);
      this.list = shelfGoodsNumList;
      this.title = rowLine + "-" + col;
      this.visible = true;
    },
    // 关闭
    handleClose() {
      this.visible = false;
      this.model = Object.assign({});
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth;
      if (screenWidth < 1000) {
        this.modalWidth = screenWidth;
      } else {
        this.modalWidth = 1000;
      }
    },
  },
};
</script>

<style scoped lang="less">
.textBox {
  .label {
    font-weight: bold;
    font-size: 16px;
  }
  margin: 0 30px 0 0;
}
</style>
